<template>
    <div class="form-link">

        <!--Sinput-->
        <div id="input" @click="showLinkSelector">
            <cube-input
                    v-model="text_value"
                    placeholder="请选择推广链接"
                >
                <template v-slot:append v-if="value !== ''">
                    <div class="remove"
                         @click.stop="$emit('confirm','')">
                        <i class="iconfont icon-guanbi"></i>
                    </div>
                </template>
            </cube-input>
        </div>
        <!--Einput-->

    </div>
</template>

<script>
export default {
    name: "form-link",
    data() {
        return {
            text_value: ''
        }
    },
    model: {
      prop: 'value',
      event: 'confirm'
    },
    props: {
        value: {
            type: String,
            default: ''
        }
    },
    watch: {
        value() {
            if(this.value !== '') {
                this.setTextValue()
            } else {
                this.text_value = ''
            }
        }
    },
    mounted() {
        if(this.value !== '') {
            this.setTextValue()
        }
    },
    methods: {
        /**
         * 显示推广链接选择器
         */
        showLinkSelector() {
            this.$createLinks({
                is_show: new Date().getTime(),
                select: true,
                onConfirm: (res) => {
                    this.$emit("confirm",res)
                }
            })
        },
        /**
         * 设置input显示的文字
         */
        setTextValue(){
            this.$get("link/get",{
                link_id: this.value
            })
                .then((res) => {
                    if(res.data.code === 0) {
                        this.text_value = res.data.data.name
                    }
                })
        }
    }
}
</script>

<style scoped lang="less">
    .remove{
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border-radius: 10px;
        background: rgba(250,204,60,.9);
        i{
            display: inline-block;
            color: #fff;
            font-size: 12px;
            transform: scale(.7);
        }
    }
    #input{
        position: relative;
    }
    #input::before{
        position: absolute;
        top:0;
        left:0;
        z-index:100;
        content:"";
        display: block;
        background:rgba(0,0,0,0);
        width: 100%;
        height: 100%;
    }
</style>
